<template>
  <div class="banner">
    <q-carousel
        animated
        v-model="slide"
        navigation
        infinite
        :autoplay="autoplay"
        transition-prev="slide-right"
        transition-next="slide-left"
        @mouseenter="autoplay = false"
        @mouseleave="autoplay = true"
        :height="'100%'"
    >
      <q-carousel-slide v-for="(item,index) in Props.list" :name="index" :img-src="item" />
    </q-carousel>
  </div>
</template>
<script lang="ts" setup>
import {ref,defineProps} from "vue"
const slide = ref(0), autoplay= ref(true)
const Props = defineProps({
  list:{
    type:Array,
    default:()=>[],
  }
})
</script>
<style lang="scss" scoped>
.banner{
  height: 350px;
}
</style>
